<!--
报名
-->
<template>
    <div class="apply-box">
        <div class="zhezhao" ref="zhezhao" v-show="showticket" @click="close()"></div>
        <!--<div class="box" @click="comment()">
            <span>
                <i class="iconfont icon-xiepinglun"></i>
            </span>
            评论
        </div>-->
        <div class="box" @click="collect()">
            <span>
                <i class="iconfont icon-shoucangcopy" v-if="iscollect"></i>
                <i class="iconfont icon-shoucang" v-else></i>
            </span>
            收藏
        </div>
        <div class="box2" v-if="activity.actApplyStauts*1===1" @click="apply()">立即报名</div>
        <div class="box2 " v-if="activity.actApplyStauts*1===0" @click="showMsg()">
            <div>开始报名</div>
            <div class="box-min">{{activity.signupStartTime | stampFormate2}}</div>
        </div>
        <div class="box2 gray-box" v-if="activity.actApplyStauts*1===2">活动已结束</div>
        <!--<post-info :postInfo="signInfo" v-if="showSign"></post-info>-->
        <div class="ticket-pannel" v-if="showticket">

            <div class="picket_title">
                <span class="title">选择票券</span><i class="iconfont icon-guanbi2 close" @click="close()"></i>
            </div>
            <div class="tickets" style="max-height: calc(100vh - 6.3rem);">
                <div class="ticket-box" v-for="(item, index) in tickets" :key="index" @click="selectedProduct(item, index)">
                    <div class="ticketa"  :class="{'stopbuyline':item.leftNum == '0','ticketcolor': index == clickIndex,'nochang':index != clickIndex}">
                        <div class="yuan yuan1" :class="{'stopbuyline':item.leftNum == '0','ticketcolor': index == clickIndex,'nochang':index != clickIndex}"></div>
                        <div class="yuan yuan2" :class="{'stopbuyline':item.leftNum == '0','ticketcolor': index == clickIndex,'nochang':index != clickIndex}"></div>
                        <div class="yuan yuan3" :class="{'stopbuyline':item.leftNum == '0','ticketcolor': index == clickIndex,'nochang':index != clickIndex}"></div>
                        <div class="yuan yuan4" :class="{'stopbuyline':item.leftNum == '0','ticketcolor': index == clickIndex,'nochang':index != clickIndex}"></div>
                        <div class="tic-left">
                            <span class="tic-name" :class="{'margin0':item.detail != '','stopbuy':item.leftNum == '0'}">{{item.name}}</span>
                            <span class="tic-des" :class="{'stopbuy':item.leftNum == '0'}" v-if="item.detail != ''">{{item.detail}}</span>
                        </div>
                        <div class="tic-line" :class="{'stopbuydash':item.leftNum == '0'}"></div>
                        <div class="tic-right">
                            <span class="tic-price" v-if="item.price==0" :class="{'center':item.detail != '','stopbuy':item.leftNum == '0'}">免费</span>
                            <span class="tic-price" v-if="item.price!=0" :class="{'center':item.detail != '','stopbuy':item.leftNum == '0'}">¥{{item.price/100}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tic-bottom">
                <div class="tic-rest" v-if="check == true">
                    <span>数量</span>
                    <span>剩余{{leftNum}}张</span>
                    <span>限购{{limitNum}}张</span>
                </div>
                <div class="tic-compute">
                    <span class="jia" id="jian" @click="jianfa()">-</span>
                    <span class="num">{{ticketnum}}</span>
                    <span class="jian" id="jia" @click="jiafa()">+</span>
                </div>

                <div class="money">
                    <div class="heji">合计：¥{{ticketPrice*ticketnum | moneyFormate}}</div>
                    <div class="next btn1" @click="checkNext()">下一步</div>
                </div>
            </div>
        </div>
        <!--<comment :good="good" v-show="showComment"></comment>-->
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {actService} from '../../service/activityService'
    import {commonService} from '../../service/commonService'
    import postInfo from '../detail/addInfo'
    import comment from '../detail/comment'
    export default {
        props: ['activity'],
        components:{'post-info':postInfo,comment:comment},
        data(){
            return{
                status:1,flag:false,
                showticket:false,
                showSign:false,
                tickets:'',
                clickIndex: null,
                ticketnum:1,
                leftNum: 0,
                limitNum: 0,
                ticketPrice: 0,
                actId: null,
                check:false,
                iscollect:false,
                resolveOrder:'',
                signInfo:"",
                good:"",
                showComment:false,
            }
        },
        created(){
            this.$root.eventHub.$on('MSGconfirm',(target) => {
                // console.log(1);
                this.goOrder(target)
            });
        },
        mounted() {
            let that = this
            that.flag = appService.checkLogin()
            actService.gettickets({actId:that.activity.id}).then(function(res){
                that.tickets = res.data.datas
            })
            actService.getcollect({typeId:that.activity.id,type:3}).then(function(res){
                that.iscollect = res.data.datas
            })
        },
        methods: {
            go(){
                let that = this;
                commonService.showLoginModal(that)
                setTimeout(function(){
                    that.$router.push({name:'login'})
                },500)
            },
            comment(){
                let that = this;
                if(that.flag){
                    that.good={
                        id:that.activity.id,
                        type:2//活动
                    }
                    that.showComment = true;
                    // console.log(1);
                }else{
                    that.go()
                }
            },
            collect(){
                let that = this;
                if(that.flag){
                    let type = that.iscollect ? 0 : 1
                    actService.collect({activityId:that.activity.id,type:type}).then(function(res){
                        that.iscollect = !that.iscollect
                    })
                }else{
                    that.go()
                }
            },
            apply(){
                let that = this;
                // document.getElementById('app').style.cssText = 'height: 100vh !important;overflow:hidden';
                document.getElementsByClassName('activity-wrap')[0].style.cssText = 'height: 90vh !important;overflow:hidden;';
                if(that.flag){
                    that.showticket = true
                    actService.signActivity({actId:that.activity.id}).then(function(res){
                        that.signInfo = res.data.datas
                    })

                }else{
                    that.go()
                }
            },
            close:function() {
                let that = this;
                // document.getElementById('app').style.cssText = 'height: auto';
                document.getElementsByClassName('activity-wrap')[0].style.cssText = 'height:auto';
                if(that.showticket == false){
                    that.showticket = false;
                }else{
                    that.showticket = false;
                }
            },
            selectedProduct:function (item, index) { // 接收的参数
                const that = this;
                if(item.leftNum!='0'){
                    that.check = true;
                    that.clickIndex = index;
                    that.leftNum = item.leftNum;
                    that.limitNum = item.limitNum;
                    that.ticketPrice = item.price;
                    that.ticketnum = 1;
                    that.actId = item.actId;
                    that.ticketId = item.id;
                    document.getElementById('jian').style.visibility = "visible";
                    document.getElementById('jia').style.visibility = "visible";
                }

            },
            jianfa:function() {
                const that = this;
                document.getElementById('jia').style.visibility = "visible";
                if(that.clickIndex == null){
                    that.preheata();
                }
                if(that.ticketnum == 0){
                    document.getElementById('jian').style.visibility = "hidden";
                    document.getElementById('jia').style.visibility = "visible";
                } else {
                    that.ticketnum--;
                    if(that.ticketnum == 0){
                        document.getElementById('jian').style.visibility = "hidden";
                        document.getElementById('jia').style.visibility = "visible";
                    }
                }
            },
            jiafa: function() {
                const that = this;
                if(that.clickIndex == null){
                    that.preheata();
                }
                document.getElementById('jian').style.visibility = "visible";
                if(that.ticketnum == that.limitNum){
                    document.getElementById('jia').style.visibility = "hidden";
                } else {
                    that.ticketnum++;
                    document.getElementById('jian').style.visibility = "visible";
                    if(that.ticketnum == that.limitNum){
                        document.getElementById('jia').style.visibility = "hidden";
                    }
                }
            },
            checkNext: function() {
                const that = this;
                if(that.clickIndex == null){
                    commonService.autoCloseModal(that,'请选择票务', 1);
                } else if (that.ticketnum == 0) {
                    commonService.autoCloseModal(that,'填选择票数', 1);
                } else {
                    actService.checkTicket({actId:that.actId,ticketId:that.ticketId,num:that.ticketnum}).then(function (res) {
                        that.coded(res.data);
                    })
                }
            },
            // 判断code值
            coded: function(item) {
                const that = this;
                if(item.code === 200){
                    that.showSign = true
                    that.showpost()

//                    that.$router.replace({name:'actaddInfo',params:{id:that.$route.params.id,actId:that.actId,ticketId:that.ticketId,num:that.ticketnum}})
                } else if (item.code === 517107){ //您有一个待支付订单,请先处理(datas会有待支付订单号) ===携带订单编号，跳转到订单页
//                    that.solve('您有一个待支付订单,请先处理');
                    that.resolveOrder = item.datas
                    console.log(that.resolveOrder);
                    that.$store.state.msg = {
                        text: '您有一个待支付订单,请先处理',
                        cb:'goOrder',
                        type: 5
                    };
                } else if (item.code === 517109){ //您有一个待审核订单,请先处理(datas会有待审核订单号)  ===携带审核订单号，跳转到审核页面
//                    that.solve('您有一个待审核订单');
                    that.resolveOrder = item.datas
                    that.$store.state.msg = {
                        text: '您有一个待审核订单',
                        cb:'goOrder',
                        type: 5
                    };
                } else if (item.code === 517117){ ////当前票太抢手了,请刷新重试
                    commonService.autoCloseModal(that,item.message,1)
                    setTimeout(function(){
                        that.$router.go(0)
                    },500)
                } else{ //当前票种已售罄,请选择其它票种 === 刷新活动详情页
                    commonService.autoCloseModal(that,item.message,1)
                }
            },
            goOrder(){
                // console.log('go');
                if(this.resolveOrder &&this.resolveOrder!="undefined"){
                    this.$router.replace({name: 'payment', params: {orderNo: this.resolveOrder, type: '2'}})

                }else{
                    this.$router.replace({name:'mycenter'})
                }
            },
            showMsg(){
                commonService.autoCloseModal(this,'报名未开始',1)
            },
            showpost(){
                let that = this
                let data ={
                    signInfo:that.signInfo
                }
                data.ticketInfo = {
                    actId:that.actId,
                    ticketId:that.ticketId,
                    ticketnum:that.ticketnum,
                }
                this.$emit('showpost', data);
            }
        },
    }
</script>

<style lang="less">
    .apply-box {
        bottom:  0px;
        position:  fixed;
        background:  #20A0FF;
        width:  100%;
        display:  flex;
        height: 1.2rem;
        align-items: center;
        justify-content: center;
        z-index:99;
        font-size:16px;
        .box {
            flex: 1;
            background: #fff;
            line-height: 1.2rem;
            text-align:  center;
            box-shadow: inset -1px 1px 0 0 rgba(221,221,221,0.50);
            color:#333;
            .icon{
                width: 16px;
                height: 16px;
                padding-top: 2px;
            }
            .icon-xiepinglun{
                font-size:14px;
            }
        }
        .box2 {
            flex: 2;
            color:#fff;
            text-align:  center;
        }
        .box-min{
            font-size:12px;
        }
        .gray-box{
            background: #999999;
            line-height:1.2rem;
        }

        .stopbuy{
            color:#dddddd !important;
        }
        .stopbuyline{
            border: 1px solid #eee !important;
        }
        .ticket-pannel{
            width:100%;
            position: fixed;
            max-width: 450px;
            margin:0 auto;
            bottom:0;
            background: #fff;
            z-index: 99;
            box-shadow: inset -1px 1px 0 0 rgba(221,221,221,0.50);
            max-height: 100%;
            overflow: scroll;
            padding-bottom: 5rem;
            box-sizing: border-box;
            .picket_title{
                padding: 0 .5rem;
                text-align: center;
                height:1.3rem;
                line-height:1.7rem;
                overflow:hidden;
                .title{
                    text-align: center;
                    font-size: .426rem;
                    color: #333333;
                }
                .icon-guanbi2{
                    float:right;
                    color: #999999;
                    font-size:20px;
                }
            }
            .tic-bottom {
                padding: 1.2rem 0 0 0;
                position: fixed;
                bottom:0;
                width:100%;
                background:#fff;
                height: 3.2rem;;
                .tic-rest{
                    text-align: left;padding: .5rem;
                    position:absolute;
                    top:-.3rem;
                    span{
                        font-size: .37rem;
                        color: #999999;
                    }
                }
            }
            .tickets{
                padding: 0 .5rem;
                overflow: scroll;
                .ticket-box{
                    overflow: hidden;
                    margin:.4rem 0;
                }
                .changecolor{
                    border: 1px solid #6699FF;
                }
                .nochang{
                    border: 1px solid #DDDDDD;
                }
                .ticketa{
                    text-align: left;
                    margin:1px;
                    display:flex;
                    position: relative;
                    .yuan{
                        position: absolute;
                        width: .45rem;
                        height: 0.45rem;
                        border-radius:50%;
                        background-color: #fff;
                    }

                    .yuan1{
                        right:-.31rem;top:50%;
                        transform: translateY(-50%);
                    }
                    .yuan2{
                        left:-.31rem;
                        top:50%;
                        transform: translateY(-50%);
                    }
                    .yuan3{
                        right: 26%;
                        top: -.338rem;
                    }
                    .yuan4{
                        right: 26%;
                        bottom: -.338rem;
                    }
                    .tic-left{
                        padding: .373rem .3rem;
                        flex:6.8;
                        .tic-name{
                            margin-bottom: .15rem;
                            font-size: .4rem;
                            color: #333333;
                            display:block;
                        }
                        .tic-des{
                            font-size: .32rem;
                            color: #999999;
                        }
                    }
                    .tic-right{
                        padding: .373rem 0;
                        text-align: center;
                        flex:3;
                        position: relative;
                        .tic-price{
                            font-size: .4rem;
                            color: #333333;

                        }
                    }
                    .tic-line{
                        border-right: 1px dashed #A6A6A6;
                    }
                }
            }
            .tic-compute{
                padding: 0 0 1rem .55rem;
                .jia,.jian{
                    display: inline-block;
                    width: .853rem;
                    height: .853rem;
                    border: 1px solid #DDDDDD;
                    border-radius: 6px;
                    text-align: center;
                    font-size: .653rem;
                    color: #666;
                    line-height: .77rem;
                }
                .icon-icon_jian,.icon-jiahao{
                    color: #999;
                    margin: .15rem;
                    font-size: 20px;
                    display: inline-block;
                }
                .jia{
                }
                .jian{

                }
                .num{
                    display: inline-block;
                    color:#333333;
                    padding:0 1rem;
                    font-size: .64rem;
                }
            }
            .money{
                height: 1.333rem;
                line-height: 1.333rem;
                width: 100%;
                .heji{
                    padding-right: .5rem;
                    float: left;
                    display: inline-block;
                    text-align: right;
                    width:65% ;
                    background: #FFFFFF;
                    box-shadow: inset 0 0 0 0 rgba(221,221,221,0.50);
                    font-size: .457rem;
                    font-weight: 600;
                    color: #333333;
                }
                .next{
                    font-weight: 600;
                    float: left;
                    width:30% ;
                    display: inline-block;
                    text-align: center;
                    background: #6699FF;
                    box-shadow: inset 0 0 0 0 #C0CCDA;
                    font-size: .457rem;
                    color: #FFFFFF;

                }
            }

        }
        .zhezhao{
            height:100%;
            width:100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color:#000;
            opacity:0.3;

        }
        .margin0{
            margin-bottom:0;
        }
        .center{
            top: 40%;
            left: 50%;
            transform: translate(-50%);
            display: inline-block;
            position: absolute;
        }
    }


</style>